<template>
  <div id="app" class="SkTakeNotesList">
    <a-card >
      <div class="table-page-search-wrapper">
        <!-- 查询区域 -->
        <a-form layout="inline" >
          <a-row type="flex" :gutter="[8,22]">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="属性">
                <j-dict-select-tag placeholder="请选择属性" v-model="queryParam.type" dictCode="record_type"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="类型">
                <a-select default-value="1" v-model="queryParam.category" placeholder="请选择类型">
                  <a-select-option value="1">
                    视频
                  </a-select-option>
                  <a-select-option value="2">
                    照片
                  </a-select-option>
                  <a-select-option value="3">
                    音频
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="班级">
                <j-dict-select-tag placeholder="请选择班级" v-model="queryParam.customClassId" dictCode="sk_class,class_name,id,del_flag = 0 order by sort_no asc"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item  label="幼儿">
                <select-student v-model="queryParam.customStudentId" :classId="queryParam.customClassId" placeholder="请选择幼儿"></select-student>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row type="flex" :gutter="[8,22]" >
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="拍摄日期">
                <a-range-picker 
                  valueFormat="YYYY-MM-DD" v-model="queryParam.date" @change="onChangeDate" :allowClear="false" style="width: 100%;" />
                <!-- <a-range-picker valueFormat="YYYY-MM-DD" @change="onChangeDate"/> -->
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-space>
                <a-button type="primary"  icon="search" @click="getList(1)">查询</a-button>
                <a-button type="primary"  icon="reload" @click="searchReset">重置</a-button>
                <a-button type="primary"  icon="plus" @click="addTakeNotes">新增</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 显示区域 -->
      <a-spin :spinning="loading">
        <a-empty style="margin:50px 0" v-if="total == 0" />
        <a-row v-else type="flex" justify="space-around" :gutter="[22,22]">
          <a-col v-for="item in list" :key="item.id">
            <a-card hoverable style="width: 280px;height: 370px;" :title=" item.recordType | cardTitle" :bodyStyle="{padding:'15px',textAlign:'center'}">
              <template slot="extra">
                <a-button size="small" type="danger" ghost @click="deleteRecord(item.id)" v-has="'management:SkTakeNotesList:delete'">
                  <a-icon type="delete" />
                  <span>删除</span>
                </a-button>
              </template>
              <div style="margin:15px 0;">
                <div class="video-box" v-show="item.recordCategory == 1" >
                  <video width="100%"  :src="getImgView(item.fileUrl)" style="width:100%;height: 100%;object-fit: cover"></video>
                  <a-icon type="play-circle" class="video-circle" @click="viewVideo(item)"/>
                </div>
                <img v-show="item.recordCategory == 2" class="take-notes-img"  :preview="item.id" :src="getImgView(item.fileUrl)" alt="">
                <audio v-show="item.recordCategory == 3" :src="item.fileUrl" ></audio> 
              </div>
              <div style="padding:35px 0;">
                <a-card-meta :title="`${item.stuName} 来源:${ textByCache(item.recordSource) }`" >
                  <template slot="description">
                    <span>{{ item.recordTime }}</span>
                  </template>
                </a-card-meta>
              </div>
            </a-card>
          </a-col>
          <a-col v-for="item in 6" :key="item">
            <a-card hoverable style="width: 280px;height: 0;" :bordered="false" :bodyStyle="{padding:'15px',textAlign:'center'}"></a-card>
          </a-col>
        </a-row>
      </a-spin>
      <div class="take-notes-list">
        <a-pagination show-quick-jumper  :default-current="1"  :show-total="total => `共 ${total} 条`" :total="total" :page-size="pageSize" @change="changePagination" size="small" />
      </div>
    </a-card>
    <sk-take-notes-modal ref="SkTakeNotesModal" v-if="modelVisible"></sk-take-notes-modal>
    <sk-take-notes-form ref="SkTakeNotesForm" @ok="getList()"></sk-take-notes-form>
  </div>
</template>
<script>
import { getAction,getFileAccessHttpUrl, deleteAction } from "@/api/manage.js";
import SkTakeNotesModal from "./modules/SkTakeNotesModal.vue";
import SkTakeNotesForm from "./modules/SkTakeNotesForm.vue";
import SelectStudent from '@/components/skComponent/SelectStudent';
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil';
import { USER_INFO } from "@/store/mutation-types"
import Vue from "vue";
export default {
  name: 'SkTakeNotesList',
  data() {
    return {
      loading:false,
      queryParam:{
        type:"全部",
        category:"全部",
        customClassId:"全园",
        customStudentId:"全部",
      },
      pageSize:10,
      pageNo:1,
      total:0,
      list:[],
      modelVisible:false,
      studentList:[],
      querySearchDate:"",
      url:{
        stuList:"/management/skStudent/list",
        delete:"/health/record/delete"
      }
    }
  },
  components: {
    SkTakeNotesModal,
    SelectStudent,
    SkTakeNotesForm
  },

  filters: {
    cardTitle(val){
      return filterDictTextByCache('record_type', val)
    }
  },

  computed: {},

  created() {
    this.getList();
  },

  activated() {},

  mounted() {},

  methods: {
    textByCache(data){
      // 0系统，1老师，2家长
      if (data == 0) {
        return "系统"
      }
      if(data == 1){
        return "老师"
      }
      if(data == 2){
        return "家长"
      }
    },
    getList(pageNo){
      this.loading = true;
      let url = "health/record/page";
      let params = {
        pageSize:this.pageSize,
        pageNo:pageNo?pageNo:this.pageNo,
        recordType:this.queryParam.type == "全部"?null:this.queryParam.type,
        recordCategory:this.queryParam.category == "全部"?null:this.queryParam.category,
        classId:this.queryParam.customClassId == "全园"?null:this.queryParam.customClassId,
        studentId:this.queryParam.customStudentId == "全部"?null:this.queryParam.customStudentId,
        startDate:this.queryParam.stratDate,
        endDate:this.queryParam.endDate,
        userId:this.queryParam.customClassId != "全园"?null:Vue.ls.get(USER_INFO).id
      }
      getAction(url,params).then((res)=>{
        if(res.success){
          this.list = res.result.records;
          this.total = res.result.total;
        } else {
          this.message.warning(res.message);
        }
        this.loading = false;
      }).catch((e) => {
        console.error(e)
      }).finally(() => {
      })
    },
    // 获取时间
    onChangeDate( dateString){
      this.queryParam.stratDate = dateString[0]
      this.queryParam.endDate = dateString[1]
    },
    // 分页
    changePagination(page, pageSize){
      this.pageNo = page;
      this.getList();
    },
    // 重置查询条件
    searchReset(){
      this.queryParam = {
        type:"全部",
        category:"全部",
        customClassId:"全园",
        customStudentId:"全部",
      };
      this.getList(1);
    },
    // 删除记录
    deleteRecord(id){
      let params = {
        id:id
      }
      deleteAction(this.url.delete,params).then((res)=>{
        if(res.success){
          this.getList();
          this.$message.success(res.message);
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    addTakeNotes(){
      this.$refs.SkTakeNotesForm.init();
    },
    // 获取全部学生
    getStudentList(){
      let params = {
        classId:this.queryParam.classId
      }
      getAction(this.url.stuList,params).then((res)=>{
        if(res.success){
          this.studentList = res.result.records;
        } else {
          this.message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    
    // 查看视频
    viewVideo(data){
      this.modelVisible = true;
      this.$nextTick(()=>{
        console.log(data);
        this.$refs.SkTakeNotesModal.init(data)
      })
    },
    // 查看图片
    getImgView(text){
      if(text && text.indexOf(",")>0){
        text = text.substring(0,text.indexOf(","))
      }
      return getFileAccessHttpUrl(text)
    },
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.take-notes-list{
  width:100%;
  margin-top:25px;
  text-align: center;
}
.video-box{
  position: relative;
  height: 150px;
  &>video{
    height: 100%;
  }
}
.take-notes-img{
  width:248px;
  height: 124px;
  object-fit: cover;
}
.video-circle{
  position: absolute;
  top:30%;
  left:39%;
  font-size: 52px;
  color:#fff;
}
</style>
